<template>
  <div class="yty-history">
  <div class="main" style="border:1px solid #207064;padding:20px 20px;height:65%">
    <h3 class="h3">监测数据查询</h3>
    <a-form-model :model="form" :colon="false" :labelCol="{span:6}" :wrapper-col="{span:17}" style="margin:10px 0">
      <a-row style="display: flex;align-items: center;">
       <a-col :span="5">
          <a-form-model-item label="企业名称" class="from-item__class" :wrapper-col="{span:18}">
            <a-select v-model="form.region">
              <a-select-option value="shanghai">Zone one</a-select-option>
              <a-select-option value="beijing">Zone two</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        
       <a-col :span="10" style="margin-left:-40px;">
          <a-form-model-item label="时间段" class="from-item__class">
            <a-date-picker
              v-model="form.date1"
              :disabled-date="disabledStartDate"
              show-time
              format="YYYY-MM-DD HH:mm:ss"
              placeholder="开始时间"
              @openChange="handleStartOpenChange"
            />
            <span style="color:rgba(255,255,255,0.7);font-size:18px;padding:0 10px;">—</span>
            <a-date-picker
              v-model="form.date2"
              :disabled-date="disabledEndDate"
              show-time
              format="YYYY-MM-DD HH:mm:ss"
              placeholder="结束时间"
              :open="endOpen"
              @openChange="handleEndOpenChange"
            />
          </a-form-model-item>
        </a-col>
        <a-col :span="3" style="display: flex;justify-content: space-between;">
          <a-button style="letter-spacing: 5px;" @click="onSubmit" class="sousuobtn">查询</a-button>
        </a-col>
      </a-row>
    </a-form-model>
    <div class="tableclass">
      <a-table
        :data-source="data"
        :pagination="false"
      >
       <a-table-column key="detectionpoint" title="序号" data-index="detectionpoint" align="center" width="5%" />
       <a-table-column key="detectiontime" title="企业名称" data-index="detectiontime" align="left" />
       <a-table-column key="time" title="监测设备名称" data-index="time" align="center" />
       <a-table-column key="shulaing" title="点位位置" data-index="shulaing" align="center" width="26%" ellipsis="true"/>
       <a-table-column key="kucun" title="监测数据" data-index="kucun" align="center" />
       <a-table-column key="watchtime" title="监测时间" data-index="watchtime" align="center" />
       <a-table-column key="action" title="操作" align="center" width="12%">
          <template slot-scope="record">
            <div class="handle">
              <span>查看详情</span>
            </div>
          </template>
        </a-table-column>
      </a-table>
       <div class="content-bottom clearfix">
        <div class="page-box">
          <div class="page-left">
          <a-pagination
            :show-total="total => `共 ${total} 条记录`"
            v-model="current"
            :total="245"
            :defaultPageSize="13"
            :item-render="itemRender"
            @change="pagechangeFn"
          />
        </div>
        </div>
      </div>
    </div>
    </div>
    <div class="main-bootom" style="height:35%;width:100%;padding:20px 20px;border:1px solid #207064;margin-top:10px;display:flex;justify-content:space-betwwen">
      <div class="left" style="width:40%; border:1px solid white" >
        <img src="@/assets/现场照片.png" alt />
      </div>
      <div class="right" style="width:50%;border:1px solid white">
        <div class="echarts-box">
          <div class="line-echarts" ref="lineecharts"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  name: "yty-history",
  data() {
    return {
      form: {
        name: "",
        region: undefined,
        date1: undefined,
        delivery: false,
        type: [],
        resource: "",
        desc: "",
        myChart:"",
        endOpen:false
      },
      data: [
        {
          detectionpoint: "1",
          detectiontime: "XXXXXXXXXXX企业",
          time: "XXXXXXXXXXXXX",
          shulaing: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
          kucun: "XXXXXX",
          watchtime:"2020-07-26 12:00"

        },
        {
          detectionpoint: "2",
         detectiontime: "XXXXXXXXXXX企业",
          time: "XXXXXXXXXXXXX",
          shulaing: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
          kucun: "XXXXXX",
          watchtime:"2020-07-26 12:00"

        },
        {
          detectionpoint: "3",
          detectiontime: "XXXXXXXXXXX企业",
          time: "XXXXXXXXXXXXX",
          shulaing: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
          kucun: "XXXXXX",
          watchtime:"2020-07-26 12:00"
        },
        {
          detectionpoint: "4",
          detectiontime: "XXXXXXXXXXX企业",
          time: "XXXXXXXXXXXXX",
          shulaing: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
          kucun: "XXXXXX",
          watchtime:"2020-07-26 12:00"

        },
        {
          detectionpoint: "5",
          detectiontime: "XXXXXXXXXXX企业",
          time: "XXXXXXXXXXXXX",
          shulaing: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
          kucun: "XXXXXX",
          watchtime:"2020-07-26 12:00"

        }
      ],
      current: 1,
    };
  },
  methods: {
    //日期选择
    disabledStartDate(startValue) {
      const endValue = this.form.data2;
      if (!startValue || !endValue) {
        return false;
      }
      return startValue.valueOf() > endValue.valueOf();
    },
    disabledEndDate(endValue) {
      const startValue = this.form.date1;
      if (!endValue || !startValue) {
        return false;
      }
      return startValue.valueOf() >= endValue.valueOf();
    },
    handleStartOpenChange(open) {
      if (!open) {
        this.endOpen = true;
      }
    },
    handleEndOpenChange(open) {
      this.endOpen = open;
    },
    onSubmit() {
      console.log("submit!", this.form);
    },
    // 表格方法
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    // 分页方法
    itemRender(current, type, originalElement) {
      if (type === "prev") {
        return <a>上一页</a>;
      } else if (type === "next") {
        return <a>下一页</a>;
      }
      return originalElement;
    },
    pagechangeFn(page, pageSize) {
      console.log(page, pageSize);
    },
    // 图表
   
    lineEcharFn() {
      // this.myCharts.clear();
      this.myChart = echarts.init(this.$refs.lineecharts);
      this.myChart.setOption({
        
        //提示框组件
        tooltip: {
          trigger: "axis",
          show: true,
          axisPointer: {
            lineStyle: {
              color: "#207064",
            },
          },
        },
        grid: {
          left: 90,
        },
        xAxis: {
          data: [
            "2020-06-09-12-00",
            "2020-06-09-12-00",
            "2020-06-09-12-00",
            "2020-06-09-12-00",
            "2020-06-09-12-00",
            "2020-06-09-12-00",
            "2020-06-09-12-00",
            "2020-06-09-12-00"
          ],
          type:'category'
        },
        yAxis: {
          //y轴字体颜色
          axisLabel: { color: "#207064" },
          dataMax: 42,
          type:"value",
          splitLine: {
            show: true,
            //设置y轴的坐标轴刻度设置为虚线和颜色
            lineStyle: {
              type: "dashed",
              color: "#207064",
            },
          },
          //y轴颜色
          axisLine: {
            lineStyle: {
              color: "#207064",
            },
          },
        },
        series: [{
          data:[15,19,24,8,14,22,26,23],
          tyepe:"line",
          smooth:true
        }],
      });
      window.addEventListener("resize", () => {
        this.myChart.resize();
      });
    },
    updated(){
      if(!this.isEcharts){
        this.myChart.resize();
    }
  },
  },
  mounted(){
    this.lineEcharFn()
  }
};
</script>
<style scoped>
.yty-history {
  width: 98%;
  height: 100%;
  padding: 2%;
  box-sizing: border-box;
}
.yty-history .from-item__class {
  display: flex;
}
.sousuobtn {
  font-size: 14px;
  background-color: #207064;
  border-color: #207064;
  font-weight: 600;
}
.exportbtn {
  background-color: transparent;
  border: 0;
  color: #207064;
  
}
.content-bottom {
  margin-top: 24px;
  width: 100%;
}
.page-box {
  display: flex;
  justify-content: space-between;
  
}
.page-left{
  position: absolute;
  right: 5.5%;
  
}

.page-right{
  display: flex;
  position: absolute;
  left: 3%;
  bottom: 45px;
}
.totalclass {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  margin-right: 20px;
}
::v-deep.yty-history .ant-form-item {
  margin-bottom: 0;
}
::v-deep.ant-form-item-children {
  display: inline-block;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* 表格样式 */
.handle {
  width: 100%;
  color: #207064;
  display: flex;
  justify-content: center;
}
.handle > span:hover {
  cursor: pointer;
  color: aquamarine;
}
/**echarts */
.echarts-box{
  width: 100%;
  height: 100%;
}
::v-deep.yty-history .ant-table table {
  border-radius: 0;
  border-left: 1px solid #207064;
  border-right: 1px solid #207064;
}
::v-deep.yty-history .ant-table-thead > tr > th {
  background-color: #207064;
  color: #9fb043;
  font-size: 16px;
  border-bottom: 0;
  border-radius: 0;
}
::v-deep.yty-history .ant-table-tbody > tr > td {
  color: rgba(255, 255, 255, 0.7);
  border-bottom: 1px solid #2c6a60;
}
::v-deep.yty-history .ant-table-tbody > tr:hover > td {
  background-color: transparent !important;
}
::v-deep.yty-history .ant-table-tbody > tr.ant-table-row-selected td {
  background-color: transparent;
}
::v-deep.yty-history .ant-checkbox-indeterminate .ant-checkbox-inner::after {
  background-color: #37ddc0;
}
::v-deep.yty-history .ant-checkbox-inner {
  border: 1px solid #37ddc0;
  background-color: #8cb3ae;
}
::v-deep.yty-history .ant-checkbox-checked .ant-checkbox-inner::after {
  border: 2px solid #37ddc0;
  border-top: 0;
  border-left: 0;
}
/* 分页 */
::v-deep.yty-history .ant-pagination-total-text {
  color: rgba(255, 255, 255, 0.7);
}
::v-deep .layout-content-main{
  background: none;
}
</style>